<template>
  <div class="age-main">
    <div ref="box" width="100%" style="height: 220px;">

    </div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data() {
    return {

    }
  },
  methods: {
    parin() {
      let paint = echarts.init(this.$refs.box)
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          data: ["利润", "支出", "收入"],
          textStyle: {
            fontSize: 12,
            color: "#ffffff"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "value"
          }
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: 15
              }
            },
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        series: [
          {
            // name: '利润',
            type: "bar",
            label: {
              show: true,
              position: "inside"
            },
            emphasis: {
              focus: "series"
            },
            color: "red",

            data: [200, 170, 240, 244, 200, 220, 210]
          },
          {
            // name: '收入',
            type: "bar",
            stack: "总量",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            color: "red",
            data: [320, 302, 341, 374, 390, 450, 420]
          },
          {
            // name: '支出',
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "left"
            },
            emphasis: {
              focus: "series"
            },
            color: "blue",
            data: [-120, -132, -101, -134, -190, -230, -210]
          }
        ]
      }
      paint.setOption(option)
    }
  },
  mounted() {
    this.parin()
  }
}
</script>

<style lang="scss">
  .age-main {

  }
</style>